<template>
  <el-dialog
    title="考试设置"
    :visible.sync="visible"
    width="600px"
    :close-on-click-modal="false"
    class="dialog-container"
    @close="handlerClose"
  >
    <el-form ref="shareForm" :model="formData" :rules="rules" size="small" label-width="98px">
      <el-form-item label="当前试卷">
        {{ paper.title }}
      </el-form-item>
      <el-form-item label="考试时间" prop="time">
        <el-date-picker
          v-model="formData.time"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <div class="edu-tips">为空表示随时可以作答</div>
      </el-form-item>
      <el-form-item label="作答次数" prop="exam_number">
        <el-input-number v-model="formData.exam_number" :min="0" :step="1" />
        <div class="edu-tips">0 表示不限制作答次数</div>
      </el-form-item>
      <el-form-item label="及格线" prop="exam_score_pass">
        <el-input-number v-model="formData.exam_score_pass" :min="0" :step="1" :max="paper.total_score" :precision="1" /> <span>（试卷总分：{{ paper.total_score }}）</span>
      </el-form-item>
    </el-form>
    <form-footer slot="footer" :loading="confirmLoading" class="dialog-footer" @cancel="handlerClose" @submit="handlerConfirm" />
  </el-dialog>
</template>

<script>
import FormFooter from '@/components/form-footer'

export default {
  components: {
    FormFooter
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    paper: {
      type: Object,
      required: true
    }
  },
  inject: ['reload'],
  data() {
    return {
      confirmLoading: false,
      dataKey: 'rollup_' + this.$route.params.id + '_' + this.$route.params.rollup_id,
      formData: {
        time: [],
        exam_number: 0,
        exam_score_pass: 0
      }
    };
  },
  created() {
    this.loadConfig()
  },
  methods: {
    loadConfig() {
      this.$http.get(
          '/exam/admin/paper/settings',
          {
            data_key: this.dataKey,
            paper_id: this.paper.paper_id
          },
          ({ data }) => {
            this.formData = {
              ...this.formData,
              ...data
            }

            if (Array.isArray(data.time) && data.time.length > 0) {
              const time = [
                new Date(data.time[0]),
                new Date(data.time[1])
              ]
              this.$set(this.formData, 'time', time)
            }
          },
          _ => {}
      )
    },
    // 关闭后重置字段
    handlerClose() {
      this.$emit('update:visible', false);
    },
    // 新增缺员
    handlerConfirm() {
      this.$refs.shareForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          this.$http.post(
              '/exam/admin/paper/settings',
              {
                ...this.formData,
                data_key: this.dataKey,
                paper_id: this.paper.paper_id
              },
              ({ msg }) => {
                this.$message.success(msg)
                this.confirmLoading = false
                this.handlerClose()
                this.$emit('reload');
              },
              ({ msg }) => {
                this.$message.error(msg)
                this.confirmLoading = false
              }
          )
        }
      })
    }
  }
};
</script>

<style></style>
